import React, { Component } from 'react'
import {NavLink,Route,Switch} from 'react-router-dom'

import "./App.css"

import Home from "./pages/Home/Home";
import About from "./pages/About/About";

export default class App extends Component {
  render() {
    return (
      <div>
        <NavLink activeClassName='aaa' to='/home'>Home</NavLink>
        <br></br>
        <NavLink activeClassName='aaa' to='/about'>About</NavLink>
        <br></br>
        <br></br>
         <Switch>  {/* 如果不加Switch组件，路由会匹配所有的路径，相同路径对应的不同组件都会渲染，加上Switch组件，匹配到第一个对应组件就会停止匹配，增加了效率 */}
          <Route path="/home">
            <Home />
          </Route>
          <Route path="/about" component={About}></Route>{/* 一般使用这种写法，也是路由组件的写法，默认有三个props值 */}
        </Switch>
        
      </div>
    )
  }
}
